<template>
    <div>
        <div class="t-main">
            <div>
                <div>
                    <div class="styleTT" style="display: flex;">
                        <div style="width:700px;">
                            <div class="sky-screen ivu-mb-16">
                                <row type="flex" justify="start">
                                    <Col span="6">
                                    <DatePicker clearable type="date" v-model="ruleForm.time" placeholder="治疗日期"
                                        @on-change="selectOption"></DatePicker>
                                    </Col>
                                    <Col span="5">
                                    <div style="margin-left: 20px;">
                                        <Select clearable v-model="ruleForm.part" placeholder="请选择"
                                            @on-change="selectOption">
                                            <Option v-for="item in listTotal" :key="`${item.clinic_project_id},${item.data_type}`"
                                                :value="`${item.clinic_project_id},${item.data_type}`">{{ item.clinic_project_name }}</Option>
                                        </Select>
                                    </div>
                                    </Col>
                                </row>
                            </div>
                            <div class="ivu-text-center" v-if="empty">
                                暂无治疗记录
                            </div>
                            <div v-else>
                                <Table show-header :columns="columns" :data="data" size="small" border>
                                    <template slot-scope="{ row, index }" slot="type">
                                        <!-- {{ String(row.type) === '1' ? '治疗' : ( String(row.type) === '2' ? '新增' : String(row.type) === '3' ? '退费' : '' ) }} -->
                                        {{ row.type_str }}
                                    </template>
                                    <template slot-scope="{ row, index }" slot="action">
                                        <a v-if="String(row.type) === '1' && row.data_type==='1'" @click="getShowDetail(row)">详细</a>
                                    </template>
                                </Table>
                                <div class="ivu-mt ivu-text-center" style="margin-top: 16px!important;width: 700px;">
                                    <Page :total="total" :current.sync="page" show-total :page-size="pageSize"
                                        @on-change="changePage" :page-size-opts="pageOpts" transfer
                                        @on-page-size-change="changePageSize" />
                                </div>
                            </div>
                        </div>
                        <div style="width:190px;margin-left: 20px;" class="leftInfo">
                            <Card>
                                <div style="font-weight:600;margin: 10px;">剩余量</div>
                                <div class="surplus ivu-pt-8">
                                    <Row :gutter="16">
                                        <i-Col v-for="item in listTotal" :key="item.clinic_project_id" span="24"
                                            style="margin-bottom: 10px;">
                                            <div>{{ item.clinic_project_name }} </div>
                                            <span>正常：
                                                <b>{{ item.total_num }}</b>
                                                援助：
                                                <b class="assinstance">{{ item.help_num }}</b>
                                            </span>
                                        </i-Col>
                                    </Row>
                                </div>
                            </Card>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="modal" title="治疗详细" class="clearCancle">
            <div class="t-main">
                <p class="time">{{detailItem.recently_clinic_time_str}}</p>
                <div>
                    <Table v-if="detailItem.template === 1||detailItem.template === 6" :loading="loading" border :columns="columns1"
                        :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/mj' }}
                        </template>
                    </Table>
                    <Table v-else-if="detailItem.template === 2" :loading="loading" border :columns="columns2"
                        :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/mj' }}
                        </template>
                    </Table>
                    <Table v-else-if="detailItem.template === 3" :loading="loading" border :columns="columns3"
                        :data="treatmentData" size="small"></Table>
                    <Table v-else-if="detailItem.template === 4" :loading="loading" border :columns="columns4"
                        :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/ms' }}
                        </template>
                    </Table>
                    <Table v-else-if="detailItem.template === 5" :loading="loading" border :columns="columns5"
                        :data="treatmentData" size="small">
                        <template slot-scope="{ row }" slot="dose">
                            {{ row.dose + '/min' }}
                        </template>
                    </Table>
                </div>
                <p class="ivu-m-16">
                    <span style="margin-right: 5px">本次治疗:<strong>{{detailItem.clinic_num}}</strong> </span>
                    <span>本次剩余:<strong>{{detailItem.total_num}}</strong> </span>
                </p>
                <p v-if="detailItem.template === 1||detailItem.template === 6" class="ivu-m-16">
                    <span>备注：{{detailItem.remark}}</span>
                </p>
                <p class="ivu-m-16 sign-area">
                    <span class="sign-label">患者签名:</span>
                    <strong class="sign-img">
                        <img :src="detailItem.patient_signature || ''" alt="">
                    </strong>
                </p>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { PatientTreatmentList, PatientTreatmentInfo } from '@api/patient'
    import { GetDetailNow } from '@api/treatment'
    import dayjs from 'dayjs'
    import mixins from '@/utils/mixins'
    export default {
        name: 'Treatment',
        mixins: [mixins],
        props: ['patientInfo'],
        data () {
            return {
                page: 1,
                loading: false,
                pageSize: 10,
                pageOpts: [10, 20, 30, 50],
                modal: false,
                deImg: require('@/assets/images/de.jpg'),
                errorImg: require('@/assets/images/error.jpg'),
                data: [],
                columns1: [
                    {
                        title: '大部位',
                        align: 'center',
                        key: 'body_parts_large_name'
                    },
                    {
                        title: '细节部位',
                        align: 'center',
                        key: 'body_parts_small_name'
                    },
                    {
                        title: '剂量/时间',
                        align: 'center',
                        slot: 'dose'
                    },
                    {
                        title: '数量',
                        align: 'center',
                        key: 'num'
                    }
                ],
                columns2: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '剂量',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns3: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    }
                ],
                columns4: [
                    {
                        title: '执行部位',
                        align: 'center',
                        key: 'body_parts_large_name'
                    },
                    {
                        title: '剂量/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns5: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '执行时长/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                treatmentData: [],
                projectSub: [],
                itemData: {},
                empty: false,
                detailItem: {},
                columns: [
                    {
                        title: '项目',
                        align: 'center',
                        fixed: 'left',
                        minWidth: 150,
                        key: 'clinic_project_name'
                    },
                    {
                        title: '数量',
                        align: 'center',
                        minWidth: 70,
                        key: 'clinic_num'
                    },
                    {
                        title: '治疗时间',
                        align: 'center',
                        minWidth: 100,
                        key: 'recently_clinic_time_str',
                        render (h, params) {
                            let row = params.row
                            return h('span', {}, dayjs(row.recently_clinic_time_str).format('YYYY-MM-DD'))
                        }
                    },
                    {
                        title: '正常剩余',
                        minWidth: 100,
                        align: 'center',

                        key: 'total_num'
                    },
                    {
                        title: '援助剩余',
                        align: 'center',

                        minWidth: 100,
                        key: 'help_num'
                    },
                    {
                        title: '操作人',
                        minWidth: 80,
                        align: 'center',

                        key: 'operate_name'
                    },
                    {
                        title: '类型',
                        minWidth: 80,
                        slot: 'type',
                        align: 'center'

                    },
                    {
                        title: '操作',
                        align: 'center',
                        fixed: 'right',
                        minWidth: 70,
                        slot: 'action'
                    }
                ],
                id: '',
                listTotal: [],
                ruleForm: {
                    time: '',
                    part: '',
                    data_type: ''
                }
            }
        },
        methods: {
            imgError (item) {
                item.patient_signature = this.errorImg;
            },
            handleDetial () {
                this.modal = true;
            },
            getData (id) {
                this.id = id
                this.onLoad()
                this.getListDetail()
            },
            getListDetail () {
                GetDetailNow({ patient_card_id: this.id, patient_user_id: this.patientInfo.id }).then(res => {
                    this.listTotal = res || []
                })
            },
            onLoad () {
                let arr = this.ruleForm.part ? this.ruleForm.part.split(',') : []
                const params = {
                    patient_card_id: this.id,
                    patient_user_id: this.patientInfo.id,
                    page: this.page,
                    pageSize: this.pageSize,
                    clinic_date: this.ruleForm.time ? dayjs(this.ruleForm.time).format('YYYY-MM-DD') : '',
                    clinic_project_id: arr.length > 0 ? arr[0] : '',
                    data_type: arr.length > 0 ? arr[1] : ''
                }
                PatientTreatmentList(params).then((res) => {
                    if (res.list && res.list.length > 0) {
                        this.total = res.total
                        this.data = res.list
                        // this.data = [{
                        //     clinic_num: 1,
                        //     clinic_project_id: 1,
                        //     clinic_project_name: "半身311",
                        //     help_num: "0",
                        //     id: "3496",
                        //     operate_name: "王莉",
                        //     patient_card_id: "92004194",
                        //     profession_name: "治疗室护士",
                        //     recently_clinic_time_str: "2020-05-14 09:19",
                        //     total_num: "-1",
                        //     type: "1"
                        // },
                        // {
                        //     clinic_num: 1,
                        //     clinic_project_id: 1,
                        //     clinic_project_name: "半身311",
                        //     help_num: "0",
                        //     id: "3496",
                        //     operate_name: "王莉",
                        //     patient_card_id: "92004194",
                        //     profession_name: "治疗室护士",
                        //     recently_clinic_time_str: "2020-05-14 09:19",
                        //     total_num: "-1",
                        //     type: "1"
                        // },
                        // {
                        //     clinic_num: 1,
                        //     clinic_project_id: 1,
                        //     clinic_project_name: "半身311",
                        //     help_num: "0",
                        //     id: "3496",
                        //     operate_name: "王莉",
                        //     patient_card_id: "92004194",
                        //     profession_name: "治疗室护士",
                        //     recently_clinic_time_str: "2020-05-14 09:19",
                        //     total_num: "-1",
                        //     type: "1"
                        // },
                        // {
                        //     clinic_num: 1,
                        //     clinic_project_id: 1,
                        //     clinic_project_name: "半身311",
                        //     help_num: "0",
                        //     id: "3496",
                        //     operate_name: "王莉",
                        //     patient_card_id: "92004194",
                        //     profession_name: "治疗室护士",
                        //     recently_clinic_time_str: "2020-05-14 09:19",
                        //     total_num: "-1",
                        //     type: "1"
                        // }]

                        this.empty = false
                    } else {
                        this.empty = true
                    }
                    this.projectSub = res.clinic_project_list || []
                })
            },
            getShowDetail (items) {
                this.detailItem = {};
                this.getTreatmentDetail(items.id)
                this.modal = true;
            },
            getTreatmentDetail (id) {
                this.loading = true
                PatientTreatmentInfo({ id }).then((res) => {
                    this.detailItem = res
                    if (res.deteail_list) {
                        this.treatmentData = res.deteail_list
                    }
                }).finally(() => {
                    this.$nextTick(() => {
                        this.loading = false
                    })
                })
            },
            // 筛选条件查询
            selectOption () {
                this.page = 1
                this.onLoad()
            }
        },
        filters: {
            handleType (val) {
                let reVal = '';
                if (val === '1') {
                    reVal = '治疗';
                } else if (val === '2') {
                    reVal = '购买(新增)'
                }
                return reVal
            }
        }
    }
</script>
<style scoped lang="less">
    /deep/.ivu-card-body {
        padding-bottom: 6px !important;
    }

    /deep/.ivu-card-bordered {
        max-height: 560px;
        overflow: auto;
    }

    *::-webkit-scrollbar {
        width: 10px;
        /*对垂直流动条有效*/
        height: 10px;
        /*对水平流动条有效*/
    }

    /*定义滚动条的轨道颜色、内阴影及圆角*/
    *::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 3px;
    }

    /*定义滑块颜色、内阴影及圆角*/
    *::-webkit-scrollbar-thumb {
        border-radius: 7px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #eee;
    }

    /*定义右下角汇合处的样式*/
    *::-webkit-scrollbar-corner {
        background: khaki;
    }

    .styleTT {
        /deep/.ivu-table-wrapper-with-border {
            border: 1px solid #dcdee2 !important;
            border-right: 0 !important;
            /* border-bottom: 0!important;
             */
        }

        /deep/.ivu-table th {
            background-color: #f8f8f9;
        }

        /deep/.ivu-table-border th {
            border-right: 1px solid #e8eaec !important;
        }

        /deep/.ivu-table-border td {
            border-right: 1px solid #e8eaec !important;
        }
    }

    /deep/.ivu-table {
        min-height: 0px !important;
    }

    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;
    }

    .c-inr-right {
        margin-right: 10px;
    }

    .surplus {
        color: #777;
        margin-bottom: 12px;
    }

    .surplus strong {
        font-size: 16px;
        margin-right: 10px;
        color: #666;
    }

    .t-main p {
        color: #666;
        margin-bottom: 8px;
    }

    .sign-area {
        position: relative;
    }

    .sign-area .sign-label {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .sign-area .sign-img {
        margin-left: 80px;
    }

    .sign-area .sign-img img {
        max-width: 200px;
    }

    .t-main {
        min-height: 400px;
    }

    .main-height {
        height: 380px;
        max-height: 380px;
        overflow-y: auto;
    }

    .surplus span b {
        font-weight: bold;
        font-size: 14px;
        margin-right: 4px;
        color: #19be6b;
    }

    .surplus span b.assinstance {
        color: #ff9900;
    }
</style>
